<template>
	<view class="item-container">
		<up-cell :title="null" :value="null">
			<template #icon>
				<up-icon v-if="!props.isAvatar" :name="props.iconName" size="48"></up-icon>
				<up-avatar v-else :src="props.iconName" size="48"></up-avatar>
			</template>
			<template #title>
				<u-text size="17" :text="props.titleText" bold lineHeight="28"></u-text>
			</template>
			<template #label>
				<u-text size="12" :text="props.labelText" color="#999"></u-text>
			</template>
			<template #right-icon>
				<view class="right-box">
					<u-text size="12" lineHeight="25" color="#999" :text="props.messageTime"></u-text>
					<text v-if="props.messageNumber !== 0" class="u-slot-value">{{ showSystemMsgNum }}</text>
				</view>
			</template>
		</up-cell>
	</view>
</template>

<script lang="ts" setup>
import { withDefaults, computed } from 'vue';
defineOptions({
	name: 'SolverMessageListItem'
});

const props = withDefaults(
	defineProps<{
		titleText: string;
		iconName: string;
		labelText: string;
		messageNumber: number;
		isAvatar: boolean;
		messageTime: string;
	}>(),
	{
		titleText: '',
		iconName: '',
		labelText: '',
		messageNumber: 0,
		isAvatar: false,
		messageTime: ''
	}
);

// 展示的系统消息，超过99显示99+
const showSystemMsgNum = computed(() => {
	return props.messageNumber > 99 ? '99+' : props.messageNumber;
});
</script>

<style lang="scss" scoped>
.item-container {
	width: 100%;
}
.right-box {
	display: flex;
	flex-direction: column;
}
.u-slot-value {
	line-height: 17px;
	text-align: center;
	font-size: 10px;
	padding: 0 5px;
	height: 17px;
	color: #ffffff;
	border-radius: 100px;
	background-color: #f56c6c;
	/* #ifndef APP-NVUE */
	margin-left: auto;
	/* #endif */
}
</style>
